<section class="content container-fluid">
    <div class="card-header">
        <filter-list request="request" callback="loadCustomers(pageIndex)"></filter-list>
    </div>
    <div class="card-body">
        <table class="table table-sm table-hover" cellspacing="0" ng-init="loadCustomers()">
            <thead class="thead-light">
                <tr>
                    <th scope="col" style="width: 15%;">
                        First Name
                    </th>
                    <th scope="col" style="width: 15%;">
                        Last Name
                    </th>
                    <th scope="col" style="width: 15%;">
                        Full Name
                    </th>
                    <th scope="col" style="width: 15%;">
                        Phone
                    </th>
                    <th scope="col" width="10%">
                        DOB
                    </th>
                    <th scope="col" width="10%">
                        Total Visit
                    </th>
                    <th scope="col" width="10%">
                        Money
                    </th>

                    <th scope="col" style="width: 5%;"></th>
                </tr>
            </thead>

            <tbody class="sortable" ng-repeat="item in data.items track by $index">
                <tr class="sortable-item" sort-model="customer" sort-model-id="{{item.id}}" data-toggle="collapse" href="#collapse-page{{item.id}}-childs"
                    role="button" aria-expanded="false" aria-controls="collapse-page{{item.id}}-childs">
                    <td>
                        {{item.firstName}}
                    </td>
                    <td>
                        {{item.lastName}}
                    </td>

                    <td>
                        {{item.fullName}}
                    </td>
                    <td>
                        <small>
                            {{item.phoneNumber | phoneNumber }}
                        </small>
                    </td>
                    <td>
                        <small>
                            {{item.birthday | utcToLocal:'dd.MM.yyyy'}}
                        </small>
                    </td>
                    <td>
                        {{item.total}}
                    </td>
                    <td>
                        {{item.spent}}
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                            <a href="/portal/customer/details/{{item.id}}" class="btn btn-link">
                                <span class="fas fa-eye text-info"></span>
                            </a>

                            <a ng-click="removeCustomer(item.id);" class="btn btn-link">
                                <span class="fas fa-trash-alt text-danger"></span>
                            </a>
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end m-0"
            a-class="page-link" paging-action="loadCustomers(page-1)" scroll-top="true"></paging>
    </div>
</section>